<head>
    <meta charset="UTF-8">
    <title>基本使用</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
        rel="stylesheet">
</head>
<style>
    #result {
        border: darkorchid 2px;
        color: blue;
        font-size: 12px;
        border-radius: 5px;
    }
</style>

<body>
    <div class="container">
        <h2 class="page-header">Promise 初体验</h2>
        <button class="btn btn-primary" id="btn">点击抽奖</button>
        <hr>
        <div class="row">
            <!-- 列表组、页眉、页脚 -->
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header">查看中奖结果</div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item" id="result">无结果</li>
                    </ul>
                    <div class="card-footer">---版权所有---</div>
                </div>
            </div>
        </div>
    </div>
    <script>
        //生成随机数
        function rand(m, n) {
            return Math.ceil(Math.random() * (n - m + 1)) + m - 1;
        }
        /**
        点击按钮， 2s 后显示是否中奖(30%概率中奖)
        若中奖弹出恭喜恭喜，奖品为10万RMB劳斯莱斯优惠券
        若未中奖弹出再接再厉
        **/
        const result = document.getElementById("result");
        const btn = document.querySelector('#btn');
        btn.addEventListener('click', function () {
            // setTimeout(()=>{
            //     let n = rand(1,100);
            //     if(n <= 30){
            //         result.innerHTML = "恭喜恭喜,奖品为10万RMB劳斯莱斯优惠券"
            //     }else{
            //         result.innerHTML = "再接再厉"
            //     }
            // },1000);
            // resolve 以及 reject 均为函数形式
            const p = new Promise((resolve, reject) => {
                setTimeout(() => {
                    let n = rand(1, 100);
                    if (n <= 30) {
                        resolve(n); // 将promise对象状态设置为成功
                    } else {
                        reject(n); // 将promise对象状态设置为失败
                    }
                }, 1000);
            })
            // then 方法
            p.then((value) => {
                result.innerHTML = "恭喜恭喜,奖品为10万RMB劳斯莱斯优惠券,中奖号码为:" + value;
            }, (reason) => {
                result.innerHTML = "再接再厉，号码为：" + reason;
            })
        });
    </script>
</body>